{% extends 'AmistateBundle::layout.html.twig'  %}

{% block breadcrumbs %}
	{% include "AmistateBundle:List:breadcrumb.html.twig" %}
{% endblock %}

{% block filters %}
	
{% endblock %}

{% block page_id %}profile{% endblock %}

{% block body %}
	<div class="row">
		<div class="twelve columns">
			{% for flashMessage in app.session.flashbag.get('success') %}
				<div data-alert="" class="alert-box success">
					{{ flashMessage }}
					<a href="" class="close">×</a>
				</div>
			{% endfor %}
			<div id="js-message"></div>
			<h2 class="sweetfont left">{{user.nombre}}</h2>
			<hr>
			<h6 class="subheader">
				{{user.edad}} años | 
				<a href="{{ url('list2',{ 'tag1': user.getOpcionesSexo(user.sexo)|urlize, 'tag2': user.getOpcionesPara(user.para)|urlize} ) }}">{{ user.getOpcionesPara(user.para) }}</a> | 
				{% if user.pais %}
						<a href="{{ url('list2',{ 'tag1': user.getOpcionesSexo(user.sexo)|urlize, 'tag2': user.getSeoUbicacion} ) }}">{{ user.getUbicacion }}</a>
				{% endif %}
			</h6>
			<hr>
            {% if not (app.user and app.user.id == user.id) %}
                <div id="rating" data-id="{{user.slug}}" data-average="{{user.puntos*10}}"></div>
                {% if is_granted('ROLE_USER') %}

                    <a id="send-message" class="radius info button" onclick="showSendMessage(false);"><i class="icon-envelope-alt"></i> &nbsp;ENVIAR MENSAJE</a>
                    {{ render(controller("AmistateBundle:Default:formSendMessage", {userTo:user, callback: 'reload'})) }}

                {% else %}
                    <a data-reveal-id="login_panel" id="send-message" class="radius alert button"><i class="icon-envelope-alt"></i> &nbsp;ENVIAR MENSAJE</a>
                {% endif %}
                &nbsp;<a data-reveal-id="reportar_panel" id="reportar" class="radius alert button"><i class="icon-warning-sign"></i> &nbsp;Reportar</a>
                {{ render(controller("AmistateBundle:Default:formDenunciar", {userInfractor:user, tipo: 1})) }}
                <hr>
            {% endif %}
			<div class="row">
				<div class="five columns">
					<!--Profile Slider-->
					<div class="profile-slider-wrapp">
						<div class="circular-item" title="Compatibility match">
							<small class="icon strong">puntos</small>
							<div>
								<input type="text" value="{{user.puntos*10}}" class="greenCircle hide" readonly="readonly">
							</div>
						</div>
						
							<div id="profile-slider" class="orbit with-bullets">
								<div class="big-profile-image orbit-slide" data-thumb="{{ user.getImageDefault.getWebPath | imagine_filter('small')}}">
									<img src="{{ user.getImageDefault.getWebPath }}" alt="{{user.nombre}}">
								</div>
								{% for image in user.getImagesNoDefault() %}
									{% if is_granted('ROLE_USER') or loop.index < 2 %}
										<div class="big-profile-image orbit-slide" data-thumb="{{ image.getWebPath | imagine_filter('small')}}">
											<img src="{{ image.getWebPath }}" alt="">
										</div>
									{% endif%}
								{% endfor%}
							</div>
					</div><!--end profile-slider-wrapp-->
				</div><!--end five-->

				<div class="seven columns">
					<!--Profile Custom Pill Tabs-->
					<dl class="tabs pill custom">
						<dd class="active"><a href="#caracteristicas">Características </a><!--<span class="notch"></span>--></dd>
						<dd class="sliderEvent"><a href="#mis-fotos">Mis fotos </a></dd>
						<dd class=""><a href="#preferencias">Preferencias </a></dd>
						<dd class=""><a href="#mas-usuarios">Más </a></dd>
					</dl>
					<div class="clearfix"></div>
					<ul class="tabs-content custom">
						<!--First Tab Content-->
						<li class="active" id="caracteristicasTab">
							<dl class="dl-horizontal">
								{% if user.getOpcionesAltura(user.altura) %}
									<dt>Altura</dt>
									<dd>{{user.getOpcionesAltura(user.altura)}}</dd>
								{% endif %}
								
								{% if user.getOpcionesEstudios(user.estudios) %}
									<dt>Nivel Académico</dt>
									<dd>{{user.getOpcionesEstudios(user.estudios)|build_tags(user)|raw}}</dd>
								{% endif %}
								
								{% if user.getOpcionesFisico(user.fisico) %}
									<dt>Contextura fisica</dt>
									<dd>{{user.getOpcionesFisico(user.fisico)|build_tags(user)|raw}}</dd>
								{% endif %}
								
								{% if user.getOpcionesEstadoCivil(user.estadoCivil) %}
									<dt>Estado civil</dt>
									<dd>{{user.getOpcionesEstadoCivil(user.estadoCivil)|build_tags(user)|raw}}</dd>
								{% endif %}
								
								{% if user.getOpcionesColorPelo(user.colorPelo) %}
									<dt>Color de pelo</dt>
									<dd>{{user.getOpcionesColorPelo(user.colorPelo)}}</dd>
								{% endif %}
																
								{% if user.getOpcionesColorOjos(user.colorOjos) %}
									<dt>Color de ojos</dt>
									<dd>{{user.getOpcionesColorOjos(user.colorOjos)}}</dd>
								{% endif %}
								
								{% if user.nacionalidad %}
									<dt>Nacionalidad</dt>
									<dd>{{user.nacionalidad|build_tags(user)|raw}}</dd>
								{% endif %}
								
								{% if user.getOpcionesVives(user.vives) %}
									<dt>Vive con</dt>
									<dd>{{user.getOpcionesVives(user.vives)}}</dd>
								{% endif %}
								
								{% if user.trabajo %}
									<dt>Trabajos</dt>
									<dd>{{user.trabajo|build_tags(user)|raw}}</dd>
								{% endif %}
								
								{% if user.animales %}
									<dt>Mascotas</dt>
									<dd>{{user.animales|build_tags(user)|raw}}</dd>
								{% endif %}
								
								{% if user.idioma %}
									<dt>Idiomas</dt>
									<dd>{{user.idioma|build_tags(user)|raw}}</dd>
								{% endif %}
								
								{% if user.citaIdeal %}
									<dt>Cita Ideal</dt>
									<dd>{{user.citaIdeal|build_tags(user)|raw}}</dd>
								{% endif %}
								
								{% if user.web %}
									<dt>Web</dt>
									<dd>{{user.web}}</dd>
								{% endif %}
								
								{% if user.facebook %}
									<dt>Facebook</dt>
									<dd>{{user.facebook}}</dd>
								{% endif %}
								
								{% if user.twitter %}
									<dt>Twitter</dt>
									<dd>{{user.twitter}}</dd>
								{% endif %}
								
								{% if user.webcam %}
									<dt>Webcam</dt>
									<dd>{{user.getOpcionesWebcam(user.webcam)}}</dd>
								{% endif %}
								
							</dl>
						</li>
						<!--end First Tab Content-->

						<!--Second Tab Content-->
						<li class="mySlider" id="mis-fotosTab">              
							<div id="gallery-carousel">
								<span class="circle">
									<a href="{{ user.getImageDefault.getWebPath }}" class="imagelink" data-rel="prettyPhoto[gallery2]">
									  <span class="overlay"></span>
									  <span class="read"><i class="icon-heart"></i></span>
									  <img src="{{ user.getImageDefault.getWebPath | imagine_filter('small')}}" alt="">
									</a>
								</span>
								{% for image in user.getImagesNoDefault %}
									{% if is_granted('ROLE_USER') or loop.index < 2 %}
										<span class="circle">
											<a href="{{ image.getWebPath }}" class="imagelink" data-rel="prettyPhoto[gallery2]">
											  <span class="overlay"></span>
											  <span class="read"><i class="icon-heart"></i></span>
											  <img src="{{ image.getWebPath | imagine_filter('small')}}" alt="">
											</a>
										</span>
									{% else %}
										<span class="circle">
											<a href="javascript:void(0);" class="imagelink" data-reveal-id="login_panel">
												<span class="overlay"></span>
												<span class="read"><i class="icon-lock"></i></span>
												<img src="{{ image.getWebPath | imagine_filter('small')}}" alt="">
											</a>
										</span>
									{% endif%}
								{% endfor %}
							</div><!--end #gallery-carousel-->
                            {% if cantimg > 4 %}
                                <div class="four columns centered btn-carousel hide-for-small">
                                    <small><a href="javascript:void(0);" id="stanga-prev">ANTERIOR</a>&nbsp; | &nbsp;
                                    <a href="javascript:void(0);" id="dreapta-next">SIGUIENTE</a></small>
                                </div>
                            {% endif %}
						</li>
						<!--End Second Tab Content-->

						<!--Third Tab Content-->
						<li id="preferenciasTab">
							<dl class="dl-horizontal">
								{% if user.getOpcionesSexo(user.busco) %}
									<dt>Busco</dt>
									<dd>{{user.getOpcionesSexo(user.busco)}}</dd>
								{% endif %}
									
								{% if user.getOpcionesHijos(user.hijos) %}
									<dt>Hijos</dt>
									<dd>{{user.getOpcionesHijos(user.hijos)}}</dd>
								{% endif %}
									
								{% if user.getOpcionesReligion(user.religion) %}
									<dt>Religión</dt>
									<dd>{{user.getOpcionesReligion(user.religion)|build_tags(user)|raw}}</dd>
								{% endif %}
								
								{% if user.getOpcionesFumas(user.fumas) %}
									<dt>Fumo</dt>
									<dd>{{user.getOpcionesFumas(user.fumas)}}</dd>
								{% endif %}
								
								{% if user.getOpcionesBebes(user.bebes) %}
									<dt>Bebo</dt>
									<dd>{{user.getOpcionesBebes(user.bebes)}}</dd>
								{% endif %}
								
								{% if user.musica %}
									<dt>Música</dt>
									<dd>{{user.musica|build_tags(user)|raw}}</dd>
								{% endif %}
								
								{% if user.peliculas %}
									<dt>Películas</dt>
									<dd>{{user.peliculas|build_tags(user)|raw}}</dd>
								{% endif %}
								
								{% if user.libros %}
									<dt>Libros</dt>
									<dd>{{user.libros|build_tags(user)|raw}}</dd>
								{% endif %}
								
								{% if user.tele %}
									<dt>Programas favoritos</dt>
									<dd>{{user.tele|build_tags(user)|raw}}</dd>
								{% endif %}
								
								{% if user.deportes %}
									<dt>Deportes</dt>
									<dd>{{user.deportes|build_tags(user)|raw}}</dd>
								{% endif %}
								
								{% if user.frase %}
									<dt>Frase</dt>
									<dd>{{user.frase|build_tags(user)|raw}}</dd>
								{% endif %}
								
								{% if user.comida %}
									<dt>Comida</dt>
									<dd>{{user.comida|build_tags(user)|raw}}</dd>
								{% endif %}
								
							</dl>
						</li>
						<!--end Third Tab Content-->

						<!--Fourth Tab Content-->
						<li id="mas-usuariosTab">
							<h4>Otros usuarios</h4>
							<ul class="block-grid three-up latest-entries">
								{% for usuario in otrosUsuarios%}
									<li><span class="avatar"><a href="{{ url('perfil',{'slug' : usuario.getSlug() })}}" title="{{usuario.nombre}}"><img src="{{usuario.getImageDefault.getWebPath | imagine_filter('small')}}" alt="{{usuario.nombre}}"></a></span></li>
								{% endfor %}
							</ul>
						</li>
						<!--end Fourth Tab Content-->

					</ul>
					<!--end tabs-content-->
				</div><!--end seven-->
			</div><!--end row-->
		</div><!--end twelve-->
	</div>
</section>

<section>
	<div id="main">
		<div class="row">
			<div class="seven columns">
				<ul class="accordion">
				{% if user.descripcion %}
					<li>
						<h5 class="accordion-title">Acerca de mí<span class="accordion-icon"></span></h5>
						<div class="accordion-content">
							{{ user.descripcion|build_tags(user)|raw }}
						</div>
					</li>
				{% endif %}

				{% if user.lat and user.lng %}
					<li>
						<h5 class="accordion-title">Ubicación<span class="accordion-icon"></span></h5>
						<div class="accordion-content" style="width: 100%">
							<div id="gmap" class="twelve columns" style="height: 300px;"></div>
							<script type="text/javascript">
								$(function() {
									var geocoder = new google.maps.Geocoder();
									var gmap;
									var gmarker;
									var center = new google.maps.LatLng({{user.lat}}, {{user.lng}});
									var mapOptions = {
										center: center,
										zoom: 15,
										mapTypeId: google.maps.MapTypeId.ROADMAP
									};
									gmap = new google.maps.Map(document.getElementById("gmap"),mapOptions);

									var pinColor = "FE7569";
									var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
											new google.maps.Size(21, 34),
											new google.maps.Point(0,0),
											new google.maps.Point(10, 34));
									var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
											new google.maps.Size(40, 37),
											new google.maps.Point(0, 0),
											new google.maps.Point(12, 35));


									gmarker = new google.maps.Marker({
										position: center,
										map: gmap,
										draggable: true,
										icon: pinImage,
										shadow: pinShadow
									});
								});

							</script>
						</div>
					</li>
				{% endif %}

				{% if user.web or user.facebook or user.twitter %}
					<li>
						<h5 class="accordion-title">Social<span class="accordion-icon"></span></h5>
						<div class="accordion-content accordion-social">
                            {% if user.web %}
                                <h6>Web</h6>
                                <ul class="love-list">
                                    <li>
                                        {{user.web}}
                                    </li>
                                </ul>
                            {% endif %}

                            {% if user.getSocial(1) %}
                                <h6>Facebook</h6>
                                <ul class="love-list">
                                    {% for post in user.getSocial(1).getLastPosts() %}
                                        <li>{{ post.message }}</li>
                                    {% endfor %}
                                </ul>
                            {% endif %}

                            {% if user.getSocial(2) %}
                                <h6>Twitter</h6>
                                <ul class="love-list">
                                    {% for post in user.getSocial(2).getLastPosts() %}
                                        <li>{{ post.text }}</li>
                                    {% endfor %}
                                </ul>
                            {% endif %}
						</div>
					</li>
				{% endif %}

				</ul>
			</div>
				
			<div class="five columns">
				<div {{ user.puntos>0 ? 'itemscope itemtype="http://data-vocabulary.org/Review-aggregate"' }}>
					<div class="avatar col-i">
						<ul class="block-grid three-up latest-entries">
							<li>
								<span class="avatar">
									<img itemprop="photo" src="{{ user.getImageDefault.getWebPath | imagine_filter('small')}}" />
								</span>
							</li>
							<li>
								<div>
									<h5 itemprop="itemreviewed">{{ user.nombre}}</h5>
								</div>
								<div class="widgets clearfix">
									<div id="ratingDis" data-average="{{user.puntos*10}}"></div>
								</div>
								<div class="widgets clearfix">
									<br>
									<p {{ user.puntos>0 ? 'itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating"' }}>
										<span {{ user.puntos>0 ? 'itemprop="average"' }}>{{user.puntos*10}}</span> / <span {{ user.puntos>0 ? 'itemprop="best"' }}>100</span>
										Sobre un total de <span {{ user.puntos>0 ? 'itemprop="votes"' }}>{{user.votos}}</span> votos.
									</p>
								</div>
							</li>
						</ul>
					</div>
					<div class="col-sep"></div>
					<div class="col-r">
						<div class="puntuacion">
							
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="twelve columns">
				<div class="fb-comments" data-href="{{ url('perfil',{'slug' : user.getId() })}}"></div>
			</div>
		</div>
	</div>

    {% if is_granted('ROLE_USER') %}

        {% block header_javascripts %}
            {{ parent() }}
            <script src="http://maps.google.com/maps/api/js?sensor=false&language=es"></script>
        {% endblock %}
        {{ render(controller("UserBundle:Edit:dinamicForm")) }}
    {% endif %}

<script type="text/javascript">
	function loadSlider(sliderId)
	{
		// Gallery carousel
		$("#"+sliderId).carouFredSel({
			width	: "100%",
			auto    : false,
			scroll	: 1,
			swipe: {
				onMouse: true,
				onTouch: true
			},
			prev	: {	
				button	: "#stanga-prev",
				key		: "left"
			},
			next	: { 
				button	: "#dreapta-next",
				key		: "right"
			}
		});
	}

	$(window).ready(function(){
		// put here your slider ID
		var sliderID = "gallery-carousel";

		//load the slider on page load
		loadSlider(sliderID);

		//when someone calls the tab with the slider update the slider sizes
		$(".sliderEvent").live("click", function() {
			$(".mySlider").show();
				loadSlider(sliderID);
		});
		
		$(".fb-comments").attr('data-width',$(".fb-comments").parent().width());
		
		$("#rating").jRating({
			rateMax: 100,
            rateMin:0,
			onSuccess : function(data){
				window.location = data.redirect;
			},
			phpPath : '{{url('perfil_vote')}}',
			{% image '@AmistateBundle/Resources/public/images/jrating/stars.png' %}
				bigStarsPath:'{{ asset_url }}'
			{% endimage %}
			
		});
		
		$("#ratingDis").jRating({
			rateMax: 100,
			isDisabled: true,
			{% image '@AmistateBundle/Resources/public/images/jrating/stars.png' %}
				bigStarsPath:'{{ asset_url }}'
			{% endimage %}
			
		});
		
	});
</script>
{% endblock %}

{% if is_granted('ROLE_USER') %}
    {% block javascripts %}
        {{ parent() }}

        <script src="//code.jquery.com/ui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
    {% endblock %}
{% endif %}